Adwaita: Fix emoji picker styling

- Adjust the emoji picker appearance to be the same as gtk3's.
- Fix button.emoji-section margins in RTL.
- Prevent the .emoji hover effect from being applied to the entire
  nested popover.

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 25e76150578adeca223b390529956d0c82c2efb2..7b6500e1ae4efae88ce12eb1ed0c2456f3ce7d80 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4711,11 +4711,10 @@ stackswitcher.circular {
  * Emoji *
  ********/
 
-popover.emoji-picker { 
-  padding-left: 0;
-  padding-right: 0;
+popover.emoji-picker > contents {
+  padding: 0;
 
-  entry.search { margin: 3px 5px 5px 5px; }
+  entry.search { margin: 5px; }
 }
 
 button.emoji-section {
@@ -4724,7 +4723,7 @@ button.emoji-section {
   border-style: none none solid;
   border-radius: 0;
 
-  margin: 2px 4px 2px 4px;
+  margin: 2px 8px 4px;
   padding: 3px 0 0;
   min-width: 32px;
   min-height: 28px;
@@ -4736,8 +4735,8 @@ button.emoji-section {
 
   outline-offset: -5px;
 
-  &:first-child { margin-left: 7px; }
-  &:last-child { margin-right: 7px; }
+  &:dir(ltr):not(:last-child) { margin-right: 0; }
+  &:dir(rtl):not(:last-child) { margin-left: 0; }
 
   &:backdrop:not(:checked) { border-color: transparent; }
   &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
@@ -4756,10 +4755,10 @@ button.emoji-section {
 popover.emoji-picker .emoji {
   font-size: x-large;
   padding: 6px;
+  border-radius: 6px;
 
-  :hover {
+  &:hover {
     background: $selected_bg_color;
-    border-radius: 6px;
   }
 }
 

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 5f9623689668b726a71e3cdd09a481ae45c2aecd..c11db9371eb556de0c20bcc2cbe51869f5f93732 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2043,15 +2043,15 @@ stackswitcher.circular > button.circular, stackswitcher.circular > button.text-b
 .icon-dropshadow { -gtk-icon-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.7); }
 
 /********* Emoji * */
-popover.emoji-picker { padding-left: 0; padding-right: 0; }
+popover.emoji-picker > contents { padding: 0; }
 
-popover.emoji-picker entry.search { margin: 3px 5px 5px 5px; }
+popover.emoji-picker > contents entry.search { margin: 5px; }
 
-button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; }
+button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 8px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; }
 
-button.emoji-section:first-child { margin-left: 7px; }
+button.emoji-section:dir(ltr):not(:last-child) { margin-right: 0; }
 
-button.emoji-section:last-child { margin-right: 7px; }
+button.emoji-section:dir(rtl):not(:last-child) { margin-left: 0; }
 
 button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
@@ -2065,9 +2065,9 @@ button.emoji-section:hover label { opacity: 0.775; }
 
 button.emoji-section:checked label { opacity: 1; }
 
-popover.emoji-picker .emoji { font-size: x-large; padding: 6px; }
+popover.emoji-picker .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 
-popover.emoji-picker .emoji :hover { background: #15539e; border-radius: 6px; }
+popover.emoji-picker .emoji:hover { background: #15539e; }
 
 popover.emoji-completion contents row box { border-spacing: 10px; padding: 2px 10px; }
 

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 760b36be32c289d1672da7ea41a3a875e519a815..2593a4c41a3b78bfc1004eb602bee2cb4601d846 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -2059,15 +2059,15 @@ stackswitcher.circular > button.circular, stackswitcher.circular > button.text-b
 .icon-dropshadow { -gtk-icon-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.7); }
 
 /********* Emoji * */
-popover.emoji-picker { padding-left: 0; padding-right: 0; }
+popover.emoji-picker > contents { padding: 0; }
 
-popover.emoji-picker entry.search { margin: 3px 5px 5px 5px; }
+popover.emoji-picker > contents entry.search { margin: 5px; }
 
-button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; }
+button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 8px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; }
 
-button.emoji-section:first-child { margin-left: 7px; }
+button.emoji-section:dir(ltr):not(:last-child) { margin-right: 0; }
 
-button.emoji-section:last-child { margin-right: 7px; }
+button.emoji-section:dir(rtl):not(:last-child) { margin-left: 0; }
 
 button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
@@ -2081,9 +2081,9 @@ button.emoji-section:hover label { opacity: 0.775; }
 
 button.emoji-section:checked label { opacity: 1; }
 
-popover.emoji-picker .emoji { font-size: x-large; padding: 6px; }
+popover.emoji-picker .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 
-popover.emoji-picker .emoji :hover { background: #3584e4; border-radius: 6px; }
+popover.emoji-picker .emoji:hover { background: #3584e4; }
 
 popover.emoji-completion contents row box { border-spacing: 10px; padding: 2px 10px; }